<template>
	<view>
		<view class="hm-header-xian"></view>
		<!--顶部导航-->
		<u-sticky offsetTop="1" customNavHeight="0" bgColor="#ffffff">
			<u-tabs :list="tabs" lineColor="#FF6900" :itemStyle="{height:'88rpx',width:'130rpx'}" :current="current"
				@change="change" :scrollable="false">
			</u-tabs>
		</u-sticky>
		<view class="hm-wrap">
			<swiper class="swiper" :current="current" @animationfinish="animationfinish">
				<swiper-item class="item" v-for="(tabs_item,tabs_index) in tabs" :key="tabs_index">
					<scroll-view scroll-y class="hm-w-h" @scrolltolower="reachBottom">
						<view v-if="list[current].total" class="hm-p-lr-20">
							<!--订单列表-->
							<view class="order" v-for="(item, index) in list[current].data" :key="index">
								<view class="hm-p-b-20 hm-border-b">
									# {{item.order_mode.text}} #
									<view class="hm-dis-block-inline hm-fr">
										<view v-if="item.order_status.value==10" class="hm-col-success">
											<text v-if="item.pay_status.value==10">
												{{item.pay_status.text}}
											</text>
											<text v-if="item.pay_status.value == 20 && item.delivery_status.value < 50">
												{{item.delivery_status.text}}
											</text>
											<text v-if="item.delivery_status.value==50 && item.receipt_status.value == 0">
												{{item.receipt_status.text}}
											</text>
										</view>
										<view v-else class="hm-col-tips">
											{{item.update_time}}
										</view>
									</view>
								</view>
								<view class="hm-p-t-20" @click="goTo('order/detail?id=' + item.order_id)">
									<view class="address-left">
										<view class="hm-m-t-20">
											<view class="icons fa">发</view>
										</view>
										<view class="overturn">
											<view class="icons">
												<u-icon name="arrow-downward" size="20" bold></u-icon>
											</view>
										</view>
										<view>
											<view class="icons shou">收</view>
										</view>
									</view>
									<view class="address-right">
										<view class="detail u-line-1">{{item.address.address}}</view>
										<view class="phone hm-p-b-25">{{item.address.phone}}</view>
										<view class="detail u-line-1 hm-p-t-25 hm-border-t">{{item.address.user_address}}</view>
										<view class="phone hm-p-b-25">{{item.address.user_phone}}</view>
									</view>
								</view>
								<view class="hm-border-t hm-p-tb-20">
									{{item.pay_status.value == 10?'应付':'实付'}}：<text class="hm-col-error">￥{{item.pay_price}}</text>
									<view class="hm-dis-block-inline hm-fr">
										<view v-if="item.delivery_status.value == 10" class="hm-dis-block-inline">
											<u-button @click="cancel(item.order_id)" size="small" text="取消订单">
											</u-button>
										</view>
										<view v-if="item.pay_status.value == 10"
											class="hm-m-l-20 hm-dis-block-inline">
											<u-button @click="payOrder(item.order_id,item.pay_price)" size="small" color="#ff6900" text="立即付款">
											</u-button>
										</view>
										<view
											v-if="item.delivery_status.value==30 && item.receipt_status.value == 10"
											class="hm-m-l-20 hm-dis-block-inline">
											<u-button @click="receipt(item.order_id)" size="small" color="#ff6900"
												text="确认完成"></u-button>
										</view>
									</view>
								</view>
							</view>
							<view>
								<u-loadmore :status="loadStatus[current]" bgColor="#F7F7F7" marginTop="20"
									marginBottom="20" line></u-loadmore>
							</view>
						</view>
						<view v-else class="hm">
							<img :src="applet.domain + '/addons/pt/empty/order.png'" />
							<view class="text">暂无订单数据</view>
						</view>
						<!-- 技术支持 -->
						<view class="hm">
							{{applet.copyright}} <text class="v">V{{applet.version}}</text>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 支付收银台 -->
		<u-popup :show="cashier_show" @close="cashier_show = false" mode="center" round="8" :closeable="true">
			<view class="hm-popup">
				<view class="hm-p-b-20 hm-border-b">在线支付</view>
				<view class="hm-p-tb-50 hm-text-center">
					<view class="hm-font-b hm-col-0">
						￥<text class="hm-font-100">{{pay_price}}</text>
					</view>
					<view class="hm-font-28 hm-col-content">订单支付</view>
				</view>
				<!-- #ifdef H5 || MP-WEIXIN -->
				<view v-if="mp=='weixin'||mp=='other'" class="hm-p-20 hm-border-t hm-font-26" @click="setPay(1)">
					<view class="hm-dis-block-inline hm-m-r-15">
						<u-icon name="weixin-circle-fill" size="20" color="#19be6b"></u-icon>
					</view>
					微信
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==1" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 || MP-ALIPAY -->
				<view v-if="mp=='alipay'||mp=='other'" class="hm-p-20 hm-border-t hm-font-26" @click="setPay(4)">
					<view class="hm-dis-block-inline hm-m-r-15">
						<u-icon name="zhifubao-circle-fill" size="20" color="#2979ff"></u-icon>
					</view>
					支付宝
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==4" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<view class="hm-p-20 hm-border-t hm-font-26" @click="setPay(2)">
					<view class="hm-m-r-15 hm-dis-block-inline">
						<u-icon name="red-packet-fill" size="20"
							:color="Number(userInfo.money) < Number(pay_price)?'#c0c4cc':'#FF6900'"></u-icon>
					</view>
					<text :class="Number(userInfo.money) < Number(pay_price)?'hm-col-light':''">
						余额(<text
							:class="Number(userInfo.money) < Number(pay_price)?'':'hm-col-error'">￥{{userInfo.money}}</text>)
					</text>
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==2" size="25" color="#fa3534"></u-icon>
						<text v-if="Number(userInfo.money) < Number(pay_price)" class="hm-col-light">余额不足</text>
					</view>
				</view>
				<view class="hm-border-t hm-p-t-50">
					<view class="hm-p-lr-b25">
						<u-button shape="circle" color="#ff6900" @click="payment" text="确认支付"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let App = getApp();
	import config from '@/config.js';
	export default {
		data() {
			return {
				applet: {domain:config.domain},
				userInfo: {},
				tabs: [{
						name: '进行中',
						value: 'afoot'
					},
					{
						name: '已完成',
						value: 'complete'
					},
					{
						name: '已取消',
						value: 'cancel'
					}
				],
				current: 0,
				list:{},
				loadStatus: ['loadmore', 'loadmore', 'loadmore'],
				page: [1, 1, 1],

				mp: '', //平台类型
				order_id: '',
				pay_mode: 1, //支付模式 1微信，2余额 3后付 4支付宝
				pay_price: 0,
				cashier_show: false,
			};
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		async onShow() {
			let _this = this;
			//#ifndef H5
			await _this.$onLaunched;
			//#endif
			_this.applet = App.getApplet();
			_this.getOrderAll();
			// #ifdef MP-WEIXIN
			_this.mp = 'weixin';
			// #endif
			// #ifdef MP-ALIPAY
			_this.mp = 'alipay';
			_this.pay_mode = 4;
			// #endif
			// #ifdef H5
			_this.mp = uni.getStorageSync('browser') || '';
			if (_this.mp == 'alipay') {
				_this.pay_mode = 4;
			}
			// #endif
		},
		methods: {
			/**
			 * 获取所有类型列表
			 */
			getOrderAll: function() {
				let _this = this;
				App._get('user.order/all', {
					page: 1
				}, function(result) {
					_this.list = result.data;
				});
			},
			/**
			 * 获取订单列表
			 */
			getOrderList: function(current, page) {
				let _this = this;
				App._get('user.order/lists', {
					page: page || 1,
					dataType: _this.tabs[current].value
				}, function(result) {
					let resList = result.data, //第二页
						dataList = _this.list[current]; //第一页
					_this.list[current].data = dataList.data.concat(resList.data); //组合数据
					_this.loadStatus[current] = 'loadmore';
				});
			},
			/**
			 * tab栏切换
			 */
			change(e) {
				let _this = this;
				_this.current = e.index;
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.current = current;
			},
			
			/**
			 * 触底加载
			 */
			reachBottom: function() {
				let _this = this,
					current = _this.current;
				_this.loadStatus[current] = "loading"; //加载中
				// 已经是最后一页
				if (_this.page[current] >= _this.list[current].last_page) {
					_this.loadStatus[current] = "nomore"; //没有数据
					return false;
				}
				// 加载下一页列表
				_this.getOrderList(current, ++_this.page[current]);
			},
			/**
			 * 取消订单
			 */
			cancel: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "您确认要取消订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('user.order/cancel', {
								order_id
							}, function(result) {
								_this.getOrderAll();
							});
						}
					}
				});
			},
			/**
			 * 确认收货
			 */
			receipt: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "您确认要完成订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('user.order/receipt', {
								order_id
							}, function(result) {
								_this.getOrderAll();
							});
						}
					}
				});
			},
			
			/**
			 * 支付框
			 */
			payOrder: function(order_id, pay_price) {
				let _this = this;
				_this.getUserDetail();
				_this.order_id = order_id;
				_this.pay_price = pay_price;
				_this.cashier_show = true;
			},
			/**
			 * 设置支付方式
			 */
			setPay(e) {
				let _this = this;
				//如果是余额支付
				if (e == 2) {
					if (_this.userInfo.money < Number(_this.pay_price)) {
						return false;
					}
				}
				_this.pay_mode = e;
			},
			/**
			 * 发起付款
			 */
			payment: function() {
				let _this = this;
				let formData = {
					order_id: _this.order_id,
					pay_mode: _this.pay_mode,
				};
				// #ifdef H5
				formData.browser = _this.mp;
				// #endif
				let callback = function(result) {
					_this.cashier_show = false; //关闭结算框
					//如果支付未成功
					if (result.code === -10) {
						App.showError(result.msg, function() {
							App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
						});
						return false;
					}
					//如果是后付费，余额
					if (_this.pay_mode == 2) {
						App.showSuccess('下单成功', function() {
							App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
						});
						return true;
					}
					// 发起微信支付
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						timeStamp: result.data.payment.timeStamp,
						nonceStr: result.data.payment.nonceStr,
						package: result.data.payment.package,
						signType: result.data.payment.signType,
						paySign: result.data.payment.paySign,
						success: function(res) {
							App.showSuccess('支付成功', function() {
								App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
							});
						},
						fail: function(res) {
							let msg = '支付失败';
							if (res.errMsg == 'requestPayment:fail cancel') {
								msg = '用户取消支付';
							}
							App.showError(msg, function() {
								App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
							});
						}
					});
					//#endif
					//#ifdef H5
					//微信支付
					if (_this.pay_mode == 1) {
						if (_this.mp == 'weixin') {
							WeixinJSBridge.invoke('getBrandWCPayRequest', {
								'appId': result.data.payment.appId,
								'timeStamp': result.data.payment.timeStamp,
								'nonceStr': result.data.payment.nonceStr,
								'package': result.data.payment.package,
								'signType': result.data.payment.signType,
								'paySign': result.data.payment.paySign
							}, function(res) {
								let msg = '支付成功';
								if (res.err_msg === 'get_brand_wcpay_request:ok') {
									//支付成功
									App.showSuccess('支付成功', function() {
										App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
									});
									return false;
								} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
									msg = '用户取消支付';
								} else if (res.err_msg === 'get_brand_wcpay_request:fail') {
									msg = '支付失败';
								}
								App.showError(msg, function() {
									App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
								});
							});
						}
						if (_this.mp == 'other') {
							document.location.href = result.data.payment;
						}
					}
					//支付宝支付
					if (_this.pay_mode == 4) {
						const div = document.createElement('div');
						div.innerHTML = result.data.payment;
						document.body.appendChild(div);
						document.forms['alipaysubmit'].submit();
					}
					//#endif
					// #ifdef MP-ALIPAY
					uni.requestPayment({
						orderInfo: result.data.payment.trade_no,
						success: function(res) {
							console.log(res);
							if (res.resultCode != '9000') {
								App.showError(res.memo?res.memo:'支付失败');
								return false;
							}
							App.showSuccess('支付成功', function() {
								App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
							});
						}
					});
					//#endif
				};

				//验证是否支持后付款
				uni.showLoading({
					title: '正在处理...'
				});
				App._post_form('user.order/payment', formData, function(result) {
					callback(result);
				});
			},

			
			/**
			 * 获取当前用户信息
			 */
			getUserDetail() {
				let _this = this;
				App._get('user/detail', {}, result => {
					_this.userInfo = result.data;
				});
			},
			/**
			 * 页面跳转
			 */
			goTo: function(url) {
				App.goTo(url);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.swiper {
		flex: 1;

		.item {
			height: 100%;
			.order {
				margin-top: 20rpx;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
			}
		}
	}
</style>